<script setup lang="ts">
import tu4 from "@@/assets/images/layouts/logo.png"
import avatar1 from "@@/assets/images/layouts/1202320.png"
import avatar2 from "@@/assets/images/layouts/1202321.png"
import tu1 from "@@/assets/images/layouts/tu1.png"
import tu2 from "@@/assets/images/layouts/tu2.png"
import tu3 from "@@/assets/images/layouts/tu3.png"
import study1 from "@@/assets/images/layouts/study-1.png"
import study2 from "@@/assets/images/layouts/study-2.png"
import study3 from "@@/assets/images/layouts/study-3.png"
import study4 from "@@/assets/images/layouts/study-4.png"
import close from '@@/assets/images/layouts/close.png';
import Head from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
import Swiper from "../index/Swiper.vue"
import studyBanner1 from '@@/assets/images/layouts/study-banner-1.png';
import { useUserStore } from "@/pinia/stores/user.js"
import {onBeforeMount, ref, shallowReactive} from "vue"
import {LoginRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
import type {FormRules} from "element-plus";
import {loginApi} from "@/pages/login/apis";
import {getCardDetailListApi, getCourseListApi, getCourseListRefreshApi, getIndexFourBannerApi , getCirclePostListApi, getCirclePostListRefreshApi} from "@/api"
const userStore = useUserStore()
const dialogVisible = ref(false)
const router = useRouter()
const loading = ref(false)
const token = ref("")
const list = ref([]) // 10条AI推荐列表数据
const username = ref("")
const ids_array = ref([]) // 课程浏览过的ids数组
const ids_array2 = ref([]) // 学友圈浏览过的ids数组
const images = ref<any[]>([])
const fourBannerList = ref<any[]>([])
const fourCirclePostList = ref<any[]>([])
/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  code: [
  ]
}
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})
onBeforeMount(() => {
  localStorage.setItem("ids", "")
  localStorage.setItem("ids2", "")
  username.value = userStore.getUserName().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  loadImages()
  getCardDetailList()
  getCirclePostList()
})
const navigation = shallowReactive<{ [key: string]: any }>({})
function onBroadcastSwiper(swiper: any) {
  navigation.prevEl = swiper.navigation.prevEl
  navigation.prevEl.style.display = "block"
  navigation.nextEl = swiper.navigation.nextEl
  navigation.nextEl.style.display = "block"
}
function loadImages() {
  getIndexFourBannerApi({page:1, limit:4, area: 2}).then(res => {
    if (res.code == 0 && res.data.length > 0) {
      // 循环添加数据
      for (let i in res.data) {
        fourBannerList.value.push(res.data[i])
        images.value.push({
          title: res.data[i].title,
          link: res.data[i].visit_link,
          src: res.data[i].img
        })
      }
    }
  })
}
function getCirclePostList() {
  getCirclePostListApi({page:1, limit:4}).then(res => {
    console.log(res.code)
    if (res.code == 0) {
      // 循环添加数据
      for (let i in res.data) {
        res.data[i].comment_imgs = res.data[i].comment_imgs == '' ? []: res.data[i].comment_imgs.split(",")
        res.data[i].content = res.data[i].commentcontent? res.data[i].commentcontent : ''
        fourCirclePostList.value.push(res.data[i])
        ids_array2.value.push(res.data[i].comment_id)
      }
      // 把id存储到 localStorage
      localStorage.setItem("ids2", ids_array2.value.join(','))

    }
  })
}
function goToUrl(t) {
  router.push({
    path: t
  })
}
function goStudy(id) {
  router.push({
    name: 'studySecond',
    params: {
      id: id
    }
  })
}

function getCardDetailList() {
  const data2 = { page: 1, type: "1", limit: 4 }
  getCourseListApi(data2).then(({ data: tableData }) => {
    for (let i = 0; i < tableData.length; i++) {
      list.value.push({
        id: tableData[i].id,
        title: tableData[i].title,
        description: tableData[i].description,
        create_time: tableData[i].create_time,
        source_author: tableData[i].source_author,
        content: tableData[i].content
      })
      ids_array.value.push(tableData[i].id)
    }
    // 把id存储到 localStorage
    localStorage.setItem("ids", ids_array.value.join(','))
    console.log(　"ids: " + localStorage.getItem("ids"))
    // console.log(list)
  }).catch((data) => {
  }).finally(() => {
    loading.value = false
  })
}
function getCardDetailListRefresh() {
  const data2 = { uid: userStore.getUserId().value, page: 1, type: "2", limit: 4, has_visited_ids: localStorage.getItem("ids") }
  getCourseListRefreshApi(data2).then(({ data: tableData }) => {
    // console.log(tableData)
    // list.value = tableData
    // const ids_array = []
    for (let i = 0; i < tableData.length; i++) {
      list.value.push({
        id: tableData[i].id,
        title: tableData[i].title,
        description: tableData[i].description,
        create_time: tableData[i].create_time,
        source_author: tableData[i].source_author,
        content: tableData[i].content
      })
    }
    console.log(　"ids: " + localStorage.getItem("ids"))
    // console.log(list)
  }).catch((data) => {
  }).finally(() => {
    loading.value = false
  })
}

function getFourCirclePostListRefresh() {
  getCirclePostListRefreshApi({ uid: userStore.getUserId().value, page: 1, limit: 4, has_visited_ids: localStorage.getItem("ids2") }).then(res => {
    console.log(res.code)
    if (res.code == 0) {
      // 循环添加数据
      for (let i in res.data) {
        res.data[i].comment_imgs = res.data[i].comment_imgs == '' ? []: res.data[i].comment_imgs.split(",")
        res.data[i].content = res.data[i].commentcontent? res.data[i].commentcontent : ''
        fourCirclePostList.value.push(res.data[i])
      }
    }
  })
}
// 刷一刷功能 has_visited_ids参数从cookie获取
function refresh() {
  list.value = []
  getCardDetailListRefresh()
}
function refreshCirclePostList() {
  console.log(123)
  fourCirclePostList.value = []
  getFourCirclePostListRefresh()
}
function goCirclePostDetail(id) {
  router.push({
    name: 'frienddetail',
    params: {
      id: id
    }
  })
}
</script>

<template>
  <div class="login-container" style="display: flex;flex-direction: column;height: 100vh;justify-content: space-between;">
    <Head :activeId="3" />
    <div style="width: 100%;">
      <Flex vertical gap="middle">
        <Swiper
          :images="images"
          mode="banner"
          :pagination="{
            dynamicBullets: true,
            clickable: true
          }"
          :height="320"
          :slides-per-view="1"
          :space-between="0"
          navigation
          mousewheel
          @swiper="onBroadcastSwiper"
        />
      </Flex>
    </div>
    <div class="module-container">
      <div class="module-card-number">
        <div class="module-card-number-item">
          <div class="row1">
            <div class="text1">
              新增学时数
            </div>
            <img :src="study1" class="img1" />
          </div>
          <div class="row2">
            <span class="text1">0</span>
            <span class="text2">学时</span>
          </div>
          <div class="row3">
            累计：152学时
          </div>
        </div>
        <div class="module-card-number-item">
          <div class="row1">
            <div class="text1">
              新增AI问答数
            </div>
            <img :src="study2" class="img1" />
          </div>
          <div class="row2">
            <span class="text1">0</span>
            <span class="text2">次</span>
          </div>
          <div class="row3">
            累计：290次
          </div>
        </div>
        <div class="module-card-number-item">
          <div class="row1">
            <div class="text1">
              新增课程数
            </div>
            <img :src="study3" class="img1" />
          </div>
          <div class="row2">
            <span class="text1">0</span>
            <span class="text2">门</span>
          </div>
          <div class="row3">
            累计：4门
          </div>
        </div>
        <div class="module-card-number-item">
          <div class="row1">
            <div class="text1">
              新增知识数
            </div>
            <img :src="study4" class="img1" />
          </div>
          <div class="row2">
            <span class="text1">0</span>
            <span class="text2">个</span>
          </div>
          <div class="row3">
            累计：152个
          </div>
        </div>
      </div>
      <div class="module-one">
        <div>
          <div class="module-one-header">
            <div class="freshbox" @click="refresh">
              <i class="icon1"></i>
              <span>学习热点刷一刷</span>
            </div>
          </div>
        </div>
        <div class="module-one-body" style="max-width: 892px;min-width:892px;">
          <div class="ysk-study-box" v-for="item in list">
            <div class="top">
              <div class="left">
                <div class="text1">
                  政策
                </div>
                <div class="text1">
                  资讯
                </div>
                <div class="text1">
                  文献
                </div>
                <div class="text1">
                  数据
                </div>
                <div class="text1">
                  课件
                </div>
                <div class="text1">
                  其他
                </div>
              </div>
              <div class="right">
                <div class="right-item">
                  <img src="" class="img1" />
                  <span class="text2 orange">摘要卡</span>
                </div>
                <div class="right-item">
                  <img src="" class="img1" />
                  <span class="text2">应询卡</span>
                </div>
                <div class="right-item">
                  <img src="" class="img1" />
                  <span class="text2">要素卡</span>
                </div>
              </div>
            </div>
            <div class="center">
              <div class="left">
                <div class="row1">
                  {{item.title}}
                </div>
                <div class="row2">
                  <div class="text1">
                    1篇
                  </div>
                  <div class="text2">
                    关联度区间：78.66-99.99
                  </div>
                </div>
                <div class="row3">
                  <div class="btn" @click="goStudy(item.id)">
                    展开学习
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="row1">
                  SACA总括：
                </div>
                <div class="row2">
                  <div class="text1" style="text-indent: 2em; line-height: 22px;">
                    {{item.content}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="module-study-area">
        <div class="module-study-area-header">
          <div class="freshbox" @click="goToUrl('/friend')">
            <i class="icon2"></i>
            <span>去学友圈首页</span>
          </div>
          <div class="freshbox" @click="refreshCirclePostList()">
            <i class="icon1"></i>
            <span>学友圈刷一刷</span>
          </div>
        </div>
        <div class="xyq-box">
          <div class="xyq-item" v-for="item in fourCirclePostList" @click="goCirclePostDetail(item.comment_id)">
            <div class="row1">
              <img v-if="item.user_head_ico == '1'" :src="avatar1" class="img1" />
              <img v-else-if="item.user_head_ico == '2'" :src="avatar2" class="img1" />
              <img v-else-if="item.user_avatar != ''" :src="item.user_avatar" class="img1" />
              <img v-else :src="tu1" class="img1" />
              <div class="text1">
                {{item.user_name.substring(0,10)}}
              </div>
              <div class="text2">
                {{item.create_time.substring(0,10)}}
              </div>
            </div>
            <div class="row2">
              <div class="circle-text">
                {{item.content.substring(0,260)}}
              </div>
            </div>
            <div class="row3" v-if="item.comment_imgs.length == 1">
              <div>
                <img :src="item.comment_imgs[0]" class="img1" />
              </div>
            </div>
            <div class="row4" v-if="item.comment_imgs.length > 1">
              <div v-for="item2 in item.comment_imgs">
                <img :src="item2" class="img1" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<style src="@/pages/study/style/index2.css"  scoped></style>
<style>
.body-banner {
  width: 100%;
  height: 552px;
  background-color: #333333;
  padding: 0;
  margin: 0 auto;
  background-image: url("@@/assets/images/layouts/study-banner-1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

